<script lang="ts">
  // import { onPageShow } from '@/hooks/uniapp-composition-hooks';
  import { useRouter } from '@/constants/router';
  import { Message } from '@/libs';
  import { useStore } from '@/store';
  import { UserModule } from '@/store/modules/user.module';
  import { defineComponent, PropType } from '@vue/composition-api';
  export type FeatureItem = {
    icon: string;
    text: string;
    url: string;
    params?: Record<string | number, any>;
    click?: (item: FeatureItem, list: FeatureItem[]) => void;
  };
  export type FeatureList = Array<FeatureItem>;

  export default defineComponent({
    props: {
      list: {
        type: Array as PropType<FeatureList>,
        require: true,
        default: () => {
          return [
            {
              icon: '',
              text: '',
              url: '',
              params: {}
            }
          ] as FeatureList;
        }
      }
    },
    setup(props) {
      const router = useRouter();
      const userModule = useStore(UserModule);
      function toPage(item: FeatureItem) {
        if (item.click && typeof item.click === 'function') {
          item.click(item, props.list);
          return;
        }
        if (!userModule.userInfo.id) {
          Message.warning('请登录！');
          return;
        }
        if (!item.url) {
          return;
        }
        router.navigateTo({
          url: item.url,
          params: item.params
        });
      }
      return {
        toPage
      };
    }
  });
</script>
<template>
  <view class="more-features">
    <template v-for="(item, index) in list">
      <view class="feature-item" :key="index" @click.stop="toPage(item)">
        <image class="item-icon" :src="item.icon" />
        <view class="item-text">{{ item.text }}</view>
      </view>
    </template>
  </view>
</template>
<style lang="scss" scoped>
  .more-features {
    background-color: rgba(255, 255, 255, 1);
    padding-left: 35rpx;
    padding-right: 35rpx;

    .feature-item {
      height: 95rpx;
      display: flex;
      align-items: center;

      &:active {
        opacity: 0.7;
      }

      .item-icon {
        width: 48rpx;
        height: 48rpx;
      }

      .item-text {
        margin-left: 32rpx;
        color: rgba(51, 51, 51, 1);
        font-size: 32rpx;
        font-weight: 400;
        font-family: 'PingFang SC';
      }
    }
  }
</style>
